<template>
    <div>
        <el-row>
            <el-col :span="9">
                <el-card class="box-card" style="height:400px">
                    <div slot="header" class="clearfix">
                        <span>个人信息</span>
                        <el-button
                            style="float: right; padding: 3px 0"
                            type="text"
                            @click="commitInfo()"
                        >提交</el-button>
                        <el-button
                            style="float: right; padding: 3px 0;color:green"
                            type="text"
                            @click="changeStatus()"
                        >修改信息&nbsp;&nbsp;&nbsp;</el-button>
                    </div>
                    <el-form
                        ref="form"
                        :model="formData"
                        label-width="80px"
                        :label-position="labelPosition"
                    >
                        <el-form-item label="姓名">
                            <el-input v-model="formData.userName" width="50px" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="账号">
                            <el-input v-model="formData.account" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="昵称">
                            <el-input v-model="formData.nickName" :disabled="doIt"></el-input>
                        </el-form-item>
                        <el-form-item label="性别">
                            <el-radio-group v-model="formData.sex" :disabled="doIt">
                                <el-radio label="男"></el-radio>
                                <el-radio label="女"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="电话">
                            <el-input v-model="formData.tel" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="身份证号">
                            <el-input v-model="formData.identityCardNumber" :disabled="true"></el-input>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
            <el-col :span="6">
                <div>
                    <el-card class="box-card" style="width:300px;height:400px">
                        <div slot="header" class="clearfix">
                            <span>快捷入口</span>
                        </div>
                        <div>
                            <div>
                                <el-button type="text" @click="orderRoom()">预定房间></el-button>
                            </div>
                            <div>
                                <el-button type="text" @click="account()">我的订单></el-button>
                            </div>
                            <div>
                                <el-button type="text" @click="tokefu()">联系客服></el-button>
                            </div>
                            <div style="margin:0" v-for="item in 6" :key="item">
                                <el-button type="text">待补充></el-button>
                            </div>
                        </div>
                    </el-card>
                </div>
            </el-col>
            <el-col :span="4">
                <div>
                    <el-card class="box-card" style="width:210px;height:400px">
                        <div slot="header">今日特惠</div>
                        <div align style="margin:0px" v-for="item in 2" :key="item">
                            <div style="margin-bottom:5px">XXX房型</div>
                            <el-image :src="Sale"></el-image>
                        </div>
                        <div>
                            <el-button type="text" @click="orderRoom()">快速进入></el-button>
                        </div>
                    </el-card>
                </div>
            </el-col>
            <el-col :span="5">
                <div style="float:right">
                    <el-card class="box-card" style="width:210px;height:400px">
                        <div slot="header"></div>
                        <div align="center" style="margin:20px">广告位</div>
                        <div align="center" style="margin:20px">广告位</div>
                        <div align="center" style="margin:20px">广告位</div>
                    </el-card>
                </div>
            </el-col>
        </el-row>
        <el-divider content-position="left"></el-divider>
        <el-card>
            <div slot="header"></div>
            <div align="center" style="height:120px">广告位</div>
        </el-card>
        <el-dialog title="酒店客服" :visible.sync="kefu" width="300px">
            <div>客服电话：021-xxxxxxxxx</div>
            <div>客服电话：021-xxxxxxxxx</div>
            <div slot="footer">
                <el-button type="primary" @click="kefu = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { addUserInfo, getUserInfo } from '../../../api/index.js';
export default {
    name: 'customeruserinfo',
    data() {
        return {
            formData: {
                account: '',
                nickName: '',
                sex: '',
                userName: '',
                tel: '',
                identityCardNumber: ''
            },
            Sale: require('../image/timg3.jpg'),
            labelPosition: 'right',
            doIt: true,
            kefu: false
        };
    },
    created() {
        this.getInfo();
    },
    methods: {
        async getInfo() {
            console.log(this.$store.state.user.id);
            let json = {
                id: this.$store.state.user.id
            };
            const res = await getUserInfo(json).catch(() => {
                return 'error';
            });
            this.formData = res;
            this.formData.account = this.$store.state.user.tel;
            console.log(res);
        },
        changeStatus() {
            this.doIt = false;
        },
        async commitInfo() {
            let json = {
                id: this.$store.state.user.id,
                nickName: this.formData.nickName,
                sex: this.formData.sex
            };
            console.log(json);
            await addUserInfo(json).catch(() => {
                return 'error';
            });
             this.doIt = true;
        },
        orderRoom() {
            this.$router.push('/bookRoom');
        },
        account() {
            this.$router.push('/account');
        },
        tokefu() {
            this.kefu = true;
        }
    }
};
</script>

<style>
.el-header,
.el-footer {
    background-color: #b3c0d1;
    color: #333;
    text-align: center;
    line-height: 60px;
}

.el-aside {
    background-color: #d3dce6;
    color: #333;
    text-align: center;
    line-height: 200px;
}

.el-main {
    background-color: #e9eef3;
    color: #333;
    text-align: center;
    line-height: 160px;
}
.el-card {
    margin: 10px;
}

body > .el-container {
    margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
    line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
    line-height: 320px;
}
.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: '';
}
.clearfix:after {
    clear: both;
}
</style>